<!-- eslint-disable vue/multi-word-component-names -->
<template>
  <div>
    <h1>面试官管理</h1>
    <el-button type="primary" plain @click="dialogFormVisible = true">+添加面试官</el-button>
    <div style="width: 100%; background-color: #ddd; border-radius: 10px; padding: 20px">
      <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item label="专业领域(职位)">
          <el-select v-model="form" placeholder="全部">
            <el-option
              v-for="item in formInline.region"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="状态">
          <el-select v-model="form1" placeholder="全部">
            <el-option
              v-for="item in formInline.region1"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="搜索面试官">
          <el-input
            style="width: 450px"
            v-model="formInline.user"
            placeholder="输入面试官姓名..."
          />
        </el-form-item>
        <el-form-item style="margin-top: 30px">
          <el-button type="primary" @click="onSubmit">筛选</el-button>
          <el-button>重置</el-button>
        </el-form-item>
      </el-form>
      <el-card style="max-width: 480px">
        <template #header>
          <div class="card-header" style="width: 100%; height: 40px">
            <h1>面试官列表</h1>
          </div>
        </template>
        <el-table :data="tableData" style="width: 100%">
          <el-table-column label="面试官" width="300">
            <template #default="scope">
              <div class="card-body">
                <div style="position: relative">
                  <div style="position: absolute; left: 0; top: 0">
                    {{ scope.row.username }}
                  </div>
                  <div style="background: #ddd; height: 180px; width: 100%"></div>
                </div>
                <div class="card-footer">
                  <h1>{{ scope.row.username }}</h1>
                  <p>{{ scope.row.expert }}</p>
                  <p style="margin-left: 10px; font-size: 12px">{{ scope.row.technology }}</p>
                  <div style="display: flex; justify-content: space-between">
                    <div>
                      <el-icon><QuestionFilled /></el-icon>
                      <span> {{ scope.row.topic }}个题目 </span>
                    </div>
                    <div>
                      <el-icon><UserFilled /></el-icon>
                      <span> {{ scope.row.FieldNumber }}场面试 </span>
                    </div>
                  </div>
                </div>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="专业领域" width="180">
            <template #default="scope">
              <div style="display: flex; align-items: center">
                <span
                  style="
                    background-color: #e5eafe;
                    color: #9bacfa;
                    margin-left: 10px;
                    border-radius: 15px;
                    padding: 5px;
                  "
                  >{{ scope.row.type }}</span
                >
              </div>
            </template>
          </el-table-column>
          <el-table-column label="已完成面试">
            <template #default="scope">
              <div style="display: flex; align-items: center">
                <span style="margin-left: 10px">{{ scope.row.completed }}</span>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="状态">
            <template #default="scope">
              <div style="display: flex; align-items: center">
                <span
                  :style="{
                    width: '10px',
                    height: '10px',
                    borderRadius: '50%',
                    background: scope.row.status ? '#2ec712' : '#F39C12',
                  }"
                ></span>
                <span style="margin-left: 10px">{{ scope.row.status ? '启用' : '禁用' }}</span>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="活跃状态">
            <template #default="scope">
              <div style="display: flex; align-items: center">
                <span
                  :style="{
                    margin: '0 0 0 10px',
                    background: scope.row.dynamic ? '#D8F1EA' : '#FFC18F',
                    color: scope.row.dynamic ? ' #44CC71' : '#F39C12',
                    padding: '3px',
                    borderRadius: '3px',
                  }"
                  >{{ scope.row.dynamic ? '活跃' : '非活跃' }}</span
                >
              </div>
            </template>
          </el-table-column>
          <el-table-column label="操作">
            <template #default="scope">
              <el-button type="primary" :icon="View" circle />

              <el-button
                type="success"
                @click="handleEdit(scope.$index, scope.row)"
                :icon="Edit"
                circle
              />
              <el-button
                type="danger"
                @click="handleDelete(scope.$index, scope.row)"
                :icon="Delete"
                circle
              />
            </template>
          </el-table-column>
        </el-table>
      </el-card>
      <div>
        <p style="font-size: 12px">显示一到3,共3条记录</p>
        <el-pagination
          size="small"
          background
          layout="prev, pager, next"
          :total="50"
          class="mt-4"
        />
      </div>
    </div>
    <!-- 弹出框 -->
    <el-dialog v-model="dialogFormVisible" title="添加数字人面试官" width="800">
      <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
        <el-tab-pane label="基本信息" name="基本信息">
          <el-form :model="dialog" class="form-inp">
            <el-form-item label="数字人名称">
              <el-input class="inp-w" v-model="dialog.name" autocomplete="off" />
            </el-form-item>
            <el-form-item label="角色定位">
              <el-input
                class="inp-w"
                v-model="dialog.type"
                autocomplete="off"
                placeholder="例如:  技术面试专家"
              />
            </el-form-item>
            <el-form-item label="邮箱">
              <el-input
                class="inp-w"
                v-model="dialog.email"
                autocomplete="off"
                placeholder="邮箱地址"
              />
            </el-form-item>
            <el-form-item label="专业领域(职位)">
              <el-select v-model="dialogform">
                <el-option
                  v-for="item in dialog.Professional"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="技能标签">
              <el-input
                class="inp-w"
                v-model="dialog.name"
                autocomplete="off"
                placeholder="输入技能,按回车添加"
              />
            </el-form-item>
            <el-form-item label="状态">
              <el-select v-model="dialogform1">
                <el-option
                  v-for="item in dialog.status"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="备注">
              <el-input
                class="inp-w"
                v-model="dialog.Remarks"
                autocomplete="off"
                placeholder="添加备注信息..."
                type="textarea"
              />
            </el-form-item>
          </el-form>
        </el-tab-pane>
        <el-tab-pane label="数字形象" name="数字形象">
          <div>
            <p>选择头像</p>
            <div class="demo-type">
              <div>
                <el-avatar :size="70">头像1</el-avatar>
              </div>
              <div>
                <el-avatar :size="70">头像2</el-avatar>
              </div>
              <div>
                <el-avatar :size="70">头像3</el-avatar>
              </div>
              <div>
                <el-avatar :size="70">头像4</el-avatar>
              </div>
              <div>
                <el-avatar :size="70">头像5</el-avatar>
              </div>
              <div>
                <el-avatar :size="70">头像6</el-avatar>
              </div>
            </div>
          </div>
          <div>
            <p>上传数字人视频</p>
            <el-upload
              class="upload-demo"
              drag
              action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
              multiple
            >
              <el-icon class="el-icon--upload"><upload-filled /></el-icon>
              <div
                class="el-upload__text"
                style="width: 220px; font-size: 12px; margin-left: 260px"
              >
                <span style="font-weight: bold">点击上传视频</span>或拖放文件到这里 支持 MP4, WEBM
                格式，最大 100MB
              </div>

              <el-icon class="el-icon--upload" style="margin-bottom: 0"
                ><upload-filled style="font-size: 34px"
              /></el-icon>
              <div class="el-upload__text">拖放文件到这里或 点击上传</div>
            </el-upload>
          </div>
        </el-tab-pane>
        <el-tab-pane label="AI设置" name="AI设置">
          <div>
            <p>提示词模版</p>
            <el-input
              class="inp-w"
              v-model="dialog.name"
              autocomplete="off"
              placeholder="你是一名专业的面试官，名叫{{name}}，专注于{{specialty}}领域。你的性格是{{personality}}，你应该用专业且友好的方式评估候选人的能力。"
              type="textarea"
            />
            <p style="font-size: 12px">
              使用 name , specialty , personality 等变量，系统会自动替换
            </p>
          </div>
          <div>
            <p>温度(创造性)</p>
            <div class="slider-demo-block">
              <el-slider style="width: 100%" v-model="value" step="0.1" :min="0" :max="1" />
            </div>
            <p style="font-size: 12px">较低的值生成更确定性的回答，较高的值生成更创造性的回答</p>
          </div>
          <div>
            <p>最大输出长度</p>
            <el-input-number
              v-model="num"
              :min="50"
              :max="2000"
              controls-position="right"
              @change="handleChange"
            />
            <p style="font-size: 12px">控制AI每次回答的长度</p>
          </div>
        </el-tab-pane>
      </el-tabs>
      <template #footer>
        <div class="dialog-footer" style="border-top: #ddd 1px solid; padding-top: 40px">
          <el-button @click="dialogFormVisible = false">取消</el-button>
          <el-button type="primary" @click="dialogFormVisible = false"> 保存 </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'
import { Delete, Edit, View, QuestionFilled, UserFilled } from '@element-plus/icons-vue'
import type { TabsPaneContext } from 'element-plus'
// 引入api掉接口
import { getInterviewerList } from '../../api/getInterviewer'
const activeName = ref('基本信息')
const dialogFormVisible = ref(false)
const value = ref([0.5])
const num = ref(500)
// 数字监听框
const handleChange = (value: number | undefined) => {
  console.log(value)
}
// tab框切换
const handleClick = (tab: TabsPaneContext, event: Event) => {
  console.log(tab, event)
}
// 上方表单数据
const formInline = ref({
  user: '',
  region: [
    {
      label: '全部',
      value: '全部',
    },
    {
      label: '前端开发',
      value: '前端开发',
    },
    {
      label: '后端开发',
      value: '后端开发',
    },
    {
      label: '全栈开发',
      value: '全栈开发',
    },
    {
      label: 'UI/UX设计',
      value: 'UI/UX设计',
    },
    {
      label: '产品经理',
      value: '产品经理',
    },
    {
      label: '数据分析',
      value: '数据分析',
    },
  ],
  region1: [
    {
      label: '全部',
      value: '全部',
    },
    {
      label: '活跃',
      value: '活跃',
    },
    {
      label: '非活跃',
      value: '非活跃',
    },
  ],
})
const form = ref({})
const form1 = ref({})
// 弹出框数据
const dialog = reactive({
  name: '',
  type: '',
  email: '',
  Professional: [
    {
      label: '请选择',
      value: '请选择',
    },
    {
      label: '前端开发',
      value: '前端开发',
    },
    {
      label: '后端开发',
      value: '后端开发',
    },
    {
      label: '全栈开发',
      value: '全栈开发',
    },
    {
      label: '产品经理',
      value: '产品经理',
    },
    {
      label: '设计师',
      value: '设计师',
    },
    {
      label: '人力资源',
      value: '人力资源',
    },
    {
      label: '管理层',
      value: '管理层',
    },
  ],
  Skill: '',
  status: [
    {
      label: '启用',
      value: '启用',
    },
    {
      label: '禁用',
      value: '禁用',
    },
  ],
  Remarks: '',
})
const dialogform = ref({})
const dialogform1 = ref({})
// 编辑
const handleEdit = (index: number, row: any) => {
  console.log(index, row)
}
// 删除
const handleDelete = (index: number, row: any) => {
  console.log(index, row)
}
// 列表渲染数据
const tableData = ref([])
const getInterviewer = async () => {
  const res = await getInterviewerList()
  console.log(res)
  tableData.value = res.data
}
onMounted(() => {
  if (formInline.value.region.length > 0) {
    form.value = formInline.value.region[0].value
  }
  if (formInline.value.region1.length > 0) {
    form1.value = formInline.value.region1[0].value
  }
  if (dialog.Professional.length > 0) {
    dialogform.value = dialog.Professional[0].value
  }
  if (dialog.status.length > 0) {
    dialogform1.value = dialog.status[0].value
  }
  getInterviewer()
})
const onSubmit = () => {
  console.log('submit!')
}
</script>

<style scoped>
.demo-form-inline .el-input {
  --el-input-width: 220px;
}

.demo-form-inline .el-select {
  --el-select-width: 220px;
}
.el-form {
  display: flex;
  --el-form-label-font-size: var(--el-font-size-base);
  --el-form-inline-content-width: 220px;
}
.el-form-item {
  display: block !important;
  --font-size: 14px;
  margin-bottom: 18px;
}
.el-form-item__label {
  color: #000 !important;
}
.demo-form-inline .el-select[data-v-43ddc0ce] {
  --el-select-width: 450px;
}
.el-card {
  max-width: 100% !important;
}
.el-card__header {
  padding: 10px 0 0 0 !important;
}
::v-deep .inp-w .el-input__wrapper .el-input__inner {
  width: 700px !important;
}
#el-id-7944-24 {
  width: 700px !important;
}
.card-footer {
  padding: 10px 20px 10px 20px;
  box-sizing: border-box;
}
.card-body:hover {
  box-shadow: 0 0 8px 2px rgba(0, 0, 0, 0.3);
}
.form-inp {
  display: block;
}
.demo-type {
  display: flex;
}
.demo-type > div {
  flex: 1;
  text-align: center;
}
.slider-demo-block {
  max-width: 750px;
  display: flex;
  align-items: center;
}
.slider-demo-block .el-slider {
  margin-top: 0;
  margin-left: 12px;
}
.slider-demo-block .demonstration {
  font-size: 14px;
  color: var(--el-text-color-secondary);
  line-height: 44px;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-bottom: 0;
}
.slider-demo-block .demonstration + .el-slider {
  flex: 0 0 70%;
}
.el-input-number {
  width: 750px !important;
}
::v-deep.el-input-number .el-input__inner {
  text-align: left !important;
}
</style>
